/**
 * soccer.js v0.1
 */
	paper.install(window);// Make the paper scope global, by injecting it into window

	window.pSoccer = function() {};//The parent class
	
	/**
	/
	*/
	pSoccer.extend = function(props, staticProps) {
    // if first arg is array, then let's add mixins
    if ({}.toString.apply(arguments[0]) == "[object Array]") {
		var mixins = arguments[0];
		props = arguments[1];
		staticProps = arguments[2];
		for (var i = 0; i < mixins.length; i++) {
			for (var key in mixins[i]) { 
			props[key] = mixins[i][key];
			alert(props[key]+'_:_'+mixins[i][key]);
			}
		}
    }
	
	/**
	/
	*/
    function Constructor() {
		this.init && this.init.apply(this, arguments);
    }
    
	copyWrappedProps(this, Constructor, staticProps || {});
    
	Constructor.prototype = inherit(this.prototype);
    Constructor.prototype.constructor = Constructor;
    Constructor.extend = pSoccer.extend;

    copyWrappedProps(this.prototype, Constructor.prototype, props);

    return Constructor;
  }


  //---------- helpers

	function copyWrappedProps(currentPropsObj, newPropsObj, props) {
		for (var name in props) {
			if (typeof props[name] == "function"
			&& typeof currentPropsObj[name] == "function"
			&& fnTest.test(props[name])) {
			newPropsObj[name] = wrap(props[name], currentPropsObj[name]);
			} else {
			newPropsObj[name] = props[name];
			}
		}
	}

	var fnTest = /xyz/.test(function() {xyz;}) ? /\b_super\b/ : /./;

	function wrap(method, parentMethod) {
		return function() {
			var backup = this._super;

			this._super = parentMethod;

		try {
			return method.apply(this, arguments);
		} finally {
			this._super = backup;
		}
		}
	}


	var inherit = function(proto) {
		function F() {}
		F.prototype = proto;
		return new F;
	};
	
	/**
	/creating the  class 'Soccer'
	*/
	var Soccer = pSoccer.extend({
	
		init: function(p_width,p_hight,id_element){
			this.width = p_width%10 !=0 ? alert("Please enter the width multiple of ten."): p_width;
			this.hight = p_hight%10 !=0 ? alert("Please enter the hight multiple of ten."): p_hight;
			this.step  = p_width/10;
			this.elementName = id_element;
			this.element = document.getElementById(id_element);
			this.numofiter = (-1);
			this.arrPoints = new Array(131); // Creates array "arrpoints" of points with  'x' and 'y' coordinates.
			this.arrObject = new Array(131);
			this.arrX = new Array (this.step,this.step,0,-this.step,-this.step,-this.step,0,this.step);
			this.arrY = new Array (0,this.step,this.step,this.step,0,-this.step,-this.step,-this.step);
			this.eventerHandlers = {};
			this.element.parent = this;
			this.paperSetup();
			this.viewSize();// sets the size of the element "canvas"
			this.fillArrPoints(0);
			this.displayPoints("black",1);
			this.draw();
			this.getArrObject();
			this.on("click", this.onclick_handler);
		},
		
		/**
		/method for to setup script of 'paper'
		*/
		paperSetup : function(){
			paper.setup(this.elementName);
		},

		/**
		/method for to setup size canvas
		*/
		viewSize : function(){
			paper.view.viewSize = new Size(this.width, this.hight);
		},
		
		/**
		/method for to fill of array coordinate of  points
		*/
		fillArrPoints : function (number_point){
			for (var i = 0; i<14; i++){ //next line (from 1 to 13) with range 20px
			p = new Point(10, 10+(this.step*(i)));
			for (var m = 0; m<10; m++){ //next point (from 1 to 10) with range 20px
			number_point++;
			this.arrPoints[number_point]=new Point(10+(this.step*(m)), p.y);
			}
		}},
		
		/**
		/method to display a points.
		*/
		displayPoints : function (color, radius){ // drawing a points on the canvas
			for (var i=0; i<131; i++){
			var myCircle = new Path.Circle(this.arrPoints[i], radius);
			myCircle.fillColor = color;
		}},
		
		/**
		/method for to drawing of canvas
		*/
		draw : function(){
			paper.view.draw();
		},
		
		/**
		/method to fill array a points as a objects
		*/
		getArrObject : function(){
		for (var i=1, lon = this.arrObject.length; i < lon; i++){
			this.arrObject[i] = {
				"name":i,
				"x":this.arrPoints[i].x,
				"y":this.arrPoints[i].y,
				"activpoint":false,
				"left":true,
				"lbottom":true,
				"botton":true,
				"rbottom":true,
				"right":true,
				"rtop":true,
				"top":true,
				"ltop":true,
			}
		}},
		
		/**
		/get coordinate of active a point
		*/
		getActivPointXY : function(){
			for (var i = 1, l = this.arrObject.length; i<l; i++) {
				if(this.arrObject[i].activpoint===true) {return ([this.arrObject[i].x, this.arrObject[i].y])}
		}},
		
		/**
		/get name of  active point
		*/
		getNamberActivPoint : function(){
			for (var i = 1, l = this.arrObject.length; i<l; i++) {
				if(this.arrObject[i].activpoint === true) {return i}
		}},
		
		/**
		/make this a point active (with some coordinate)
		*/
		setActivPoint : function(setpoint) {
			var i = this.getNamberActivPoint();
			if (i>0){this.arrObject[i].activpoint = false}
			this.arrObject[setpoint].activpoint = true;
		},
		
		/**
		/method for to reset active point
		*/
		resetActivPoint : function(x, y) {
			var deltaX = x;
			var deltaY = y;
			var str = this.getActivPointXY();	
			for (var i = 1, l = this.arrObject.length; i<l; i++) {
				if(this.arrObject[i].x === (str[0]+deltaX) && this.arrObject[i].y === (str[1]+deltaY)) {this.setActivPoint(i)}
			}
			this.numofiter = -1;
		},
		
		/**
		/The handler for the mouse wheel events 
		*/
		wheel : function(event){
			var delta = 0;
			if (event.wheelDelta) { 
				delta = event.wheelDelta/120;// IE, Opera, safari, chrome 
				} else if (event.detail) { 
				delta = -event.detail/3;// Mozilla,
				}if (delta) {
			// Disabling scrolling window 
			if (event.preventDefault) {
            event.preventDefault();
			};
			// If "delta" longer 0, the wheel is spun up.
			if (delta > 0){
				this.parent.rotate(true)}
				else{
				this.parent.rotate(false)}
			}},
			
		/**
		/method for to select the next step 
		*/
		rotate : function (uOd){
			var upOrDown = uOd; 
			p = new Point(this.getActivPointXY());
			if(this.numofiter != -1){path.strokeColor = 'white'}
			path = new Path();
			path.strokeColor = 'black';
			this.numofiter = this.rotateUD(upOrDown);
			path.add(p, new Point(p.x + this.arrX[this.numofiter], p.y + this.arrY[this.numofiter]));
			this.draw();
		},
		
		/**
		/method for check next step
		*/
		rotateUD : function(ud){
		if (ud === true){
			if(this.numofiter < 7)
				{this.numofiter = this.numofiter + 1}
			else
				{this.numofiter = this.numofiter - 7}
		}else{
			if(this.numofiter > 0)
				{this.numofiter = this.numofiter - 1}
			else
				{this.numofiter == 0 ? this.numofiter = 7 : this.numofiter = 0;}
		}
		
			switch (this.numofiter){
				case 0:
				if(this.arrObject[this.getNamberActivPoint()].left === false){this.rotateUD(ud)};
					break;
				case 1:
				if (this.arrObject[this.getNamberActivPoint()].lbottom === false) {this.rotateUD(ud)};
					break;
				case 2:
				if (this.arrObject[this.getNamberActivPoint()].bottom === false) {this.rotateUD(ud)};	
					break;
				case 3:
				if (this.arrObject[this.getNamberActivPoint()].rbottom === false) {this.rotateUD(ud)};
					break;
				case 4:
				if (this.arrObject[this.getNamberActivPoint()].right === false) {this.rotateUD(ud)};	
					break;
				case 5:
				if (this.arrObject[this.getNamberActivPoint()].rtop === false) {this.rotateUD(ud)};
					break;
				case 6:
				if (this.arrObject[this.getNamberActivPoint()].top === false) {this.rotateUD(ud)};
					break;
				case 7:
				if (this.arrObject[this.getNamberActivPoint()].ltop === false) {this.rotateUD(ud)};
					break;
			}
			return this.numofiter;
		},
		
		/**
		/method for next step 
		*/
		toNextStep : function(n){
			switch (n){
				case 0:
				this.arrObject[this.getNamberActivPoint()].left = false;
				this.arrObject[this.getNamberActivPoint()+1].right = false;
					break;
				case 1:
				this.arrObject[this.getNamberActivPoint()].lbottom = false;
				this.arrObject[this.getNamberActivPoint()+11].rtop = false;
					break;
				case 2:
				this.arrObject[this.getNamberActivPoint()].bottom = false;
				this.arrObject[this.getNamberActivPoint()+10].top = false;
					break;
				case 3:
				this.arrObject[this.getNamberActivPoint()].rbottom = false;
				this.arrObject[this.getNamberActivPoint()+9].ltop = false;
					break;
				case 4:
				this.arrObject[this.getNamberActivPoint()].right = false;
				this.arrObject[this.getNamberActivPoint()-1].left = false;	
					break;
				case 5:
				this.arrObject[this.getNamberActivPoint()].rtop = false;
				this.arrObject[this.getNamberActivPoint()-11].lbottom = false;
					break;
				case 6:
				this.arrObject[this.getNamberActivPoint()].top = false;
				this.arrObject[this.getNamberActivPoint()-10].bottom = false;
					break;
				case 7:
				this.arrObject[this.getNamberActivPoint()].ltop = false;
				this.arrObject[this.getNamberActivPoint()-9].rbottom = false;
					break;
			}
		},
		
		/**
		/ the handler events of click mouse
		*/
		onclick_handler : function(){
			this.parent.toNextStep(this.parent.numofiter);
			this.parent.resetActivPoint(this.parent.arrX[this.parent.numofiter], this.parent.arrY[this.parent.numofiter]);
		},
		
		/**
		/handler events 
		*/
		on: function (eventName, handler) {
			this.element.addEventListener(eventName, handler, false);
		}











		
			
			
			
			
	},{});
	